<template>
  <div id="app">
    <page-header />
    <div id="qmp-main">
      <router-view id="app-page-content" v-slot="{ Component, route }">
        <!-- <transition :name="route.meta.transitionName"> -->
        <keep-alive :include="cachedViews" :exclude="excludeViews" :max="25">
          <component :is="Component" :key="route.name" />
        </keep-alive>
        <!-- </transition> -->
      </router-view>
    </div>
    <page-footer />
    <!-- 开发调试插件 -->
    <Vconsole />
  </div>
</template>

<script lang="ts">
  import { Toast } from 'qmp-component'
  import { defineComponent, onBeforeMount, getCurrentInstance, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import PageHeader from '@/components/common/PageHeader'
  import PageFooter from '@/components/common/PageFooter'
  import Vconsole from '@/components/common/Vconsole.vue'
  export default defineComponent({
    name: 'App',
    components: { PageHeader, PageFooter, Vconsole },
    setup() {
      const $router = useRouter()
      const $store = useStore()
      const { proxy }: any = getCurrentInstance()
      onBeforeMount(async () => {
        // 判断是否在移动应用平台app中打开
        try {
          const isQuanUBase: boolean = await proxy?.$nativeHandler('isQuanUBase', '')
          $store.commit('app/updateQuanUBase', isQuanUBase)
        } catch (error) {
          Toast('请在全友统一移动应用平台中使用：' + error)
          $router.replace('/404')
        }
        // 调用原生方法，获取原生app中的用户信息
        try {
          const userInfo: unknown = await proxy?.$nativeHandler('getBaseInfo', '')
          $store.commit('app/updateUserInfo', userInfo)
        } catch (error) {
          Toast('获取用户信息失败：' + error)
        }
      })

      const cachedViews = computed(() => $store.getters.cachedViews)
      const excludeViews = computed(() => $store.getters.excludedViews)
      return {
        cachedViews,
        excludeViews
      }
    }
  })
</script>

<style lang="less">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: var(--qmp-font-size-14);

    #qmp-main {
      position: relative;
      flex: 1;
      // overflow: hidden;
      #app-page-content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
    }
  }
  html,
  body {
    height: 100%;
    width: 100%;
    background-color: #f2f4f3;
  }
  * {
    margin: 0;
    padding: 0;
  }

  /* 页面切换动画 */
  .page-forward-enter-active,
  .page-forward-leave-active,
  .page-back-enter-active,
  .page-back-leave-active {
    will-change: transform;
    transition: all 150ms;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000;
  }

  // 页面前进-进入过渡的开始状态
  .page-forward-enter-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  // 页面前进-进入过渡状态执行结束的状态
  .page-forward-enter-to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  // 页面前进-离开过渡的开始状态
  .page-forward-leave-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  // 页面前进-离开过渡状态执行结束的状态
  .page-forward-leave-to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  // 页面后退-进入过渡的开始状态
  .page-back-enter-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  // 页面后退-进入过渡状态执行结束的状态
  .page-back-enter-to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  // 页面后退-离开过渡的开始状态
  .page-back-leave-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  // 页面后退-离开过渡状态执行结束的状态
  .page-back-leave-to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>
